<template>
  <view class="container">
    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 返回按钮 -->
      <view class="back-button-wrapper">
        <view class="global-header-left" @click="goBack">
          <view class="global-back-button">
            <text class="global-back-icon">‹</text>
          </view>
          <text class="global-back-text">返回</text>
        </view>
      </view>
      
      <!-- 云朵 - 放在最底部 -->
      <view class="cloud-wrapper">
        <image
          class="cloud-image"
          :src="getImageUrl('资源 6.png')"
          mode="widthFix"
        ></image>
      </view>
      
      <!-- 背景：蓝色天空和云朵 -->
      <view class="sky-background"></view>

      <!-- 橙色唱片圆形背景 -->
      <view class="record-container">
        <!-- 所有内容叠加在唱片上 -->
        <view class="content-overlay">
          <!-- 标题区域 -->
          <view class="title-section">
            <image
              class="main-title-image"
              :src="getImageUrl('资源 8.png')"
              mode="widthFix"
            ></image>
          </view>

          <!-- 说明文字区域 -->
          <view class="instruction-section">
            <image
              class="instruction-background"
              :src="getImageUrl('资源 10.png')"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>

      <!-- 大标题 - 放在返回按钮下方，但在小人和options下方 -->
      <view class="main-title-wrapper">
        <image
          class="main-title-banner"
          :src="getImageUrl('资源 5.png')"
          mode="widthFix"
        ></image>
      </view>

      <!-- 唱臂托盘容器 -->
      <view class="tonearm-wrapper">
        <!-- 白色唱臂 - 作为托盘 -->
        <image
          class="tonearm-image"
          :src="getImageUrl('资源 14.png')"
          mode="widthFix"
        ></image>

        <!-- 唱片圆圈容器 - 包裹唱片及内部元素 -->
        <view class="record-circle-wrapper">
          <!-- 唱片图片 - 作为圆圈的底层 -->
          <image
            class="record-image"
            :src="getImageUrl('资源 13.png')"
            mode="widthFix"
          ></image>

          <!-- 装饰图片 - 放在圆圈内部靠上位置 -->
          <image
            class="decoration-image"
            :src="getImageUrl('资源 11.png')"
            mode="widthFix"
          ></image>

          <!-- 生成按钮 - 放在圆圈内部底部 -->
          <view 
            class="generate-button-wrapper" 
            :class="{ 'breathing': selectedIndex !== null }"
            @click="generatePlaylist"
          >
            <text class="generate-button-text">生成我的专属歌单</text>
          </view>
        </view>
      </view>

      <!-- 小人 - 放在碟片最上端 -->
      <image
        class="mascot-image"
        :src="getImageUrl('资源 4.png')"
        mode="widthFix"
      ></image>

      <!-- 选项区域 - 放在红色框位置（唱片上半部分） -->
      <view class="options-section" :class="{ 'has-selected': selectedIndex !== null }">
        <view
          class="option-item"
          v-for="(option, index) in options"
          :key="index"
          :class="{ selected: selectedIndex === index }"
          @click="selectOption(index)"
        >
          <image
            class="option-image"
            :src="option.image"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
  data() {
    return {
      selectedIndex: null, // 选中的选项索引
      options: [
        {
          image: getImageUrl('资源 7.png'),
          text: "温暖同行",
        },
        {
          image: getImageUrl('资源 8.png'),
          text: "活力四射",
        },
        {
          image: getImageUrl('资源 9.png'),
          text: "自由随性",
        },
        {
          image: getImageUrl('资源 10.png'),
          text: "勇往直前",
        },
      ],
    };
  },
  methods: {
    getImageUrl,
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goBack() {
      uni.navigateBack();
    },
    selectOption(index) {
      // 如果已经选中同一个选项，取消选中
      if (this.selectedIndex === index) {
        this.selectedIndex = null;
        return;
      }
      
      this.selectedIndex = index;
    },
    generatePlaylist() {
      if (this.selectedIndex === null) {
        uni.showToast({
          title: "请先选择一个行走状态",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      const selectedOption = this.options[this.selectedIndex];
      
      // 跳转到歌单详情页面，传递用户选择的关键词
      uni.navigateTo({
        url: `/pages/music/playlist-detail?keyword=${encodeURIComponent(selectedOption.text)}`,
      });
    },
  },
};
</script>

<style scoped>
.container {
  height: 100vh;
  background: linear-gradient(to bottom, #15638c 0%, #ffffff 60%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Home图标 */
.home-button {
  display: flex;
  align-items: center;
}

.home-icon-circle {
  width: 60rpx;
  height: 60rpx;
  background: #c0c0c0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-icon {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  line-height: 1;
}

/* 导航栏标题 */
.nav-title {
  flex: 1;
  text-align: center;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

/* 全局返回按钮样式 */
.global-back-button {
  width: 60rpx;
  height: 60rpx;
  background: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.global-back-icon {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 1;
}

.global-back-text {
  color: white;
  font-size: 28rpx;
  font-weight: bold;
}

.global-header-left {
  display: flex;
  align-items: center;
}

/* 右侧菜单按钮 */
.menu-button {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: #2e5c8a;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
}

.menu-icon {
  color: white;
  font-size: 32rpx;
  line-height: 1;
}

/* 返回按钮包装器 */
.back-button-wrapper {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 100rpx);
  left: 30rpx;
  z-index: 100;
}

/* 大标题包装器 - 放在返回按钮下方，但在小人和options下方 */
.main-title-wrapper {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 200rpx);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-title-banner {
  width: 600rpx;
  display: block;
}

/* 云朵包装器 - 放在大标题底部 */
.cloud-wrapper {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 130rpx);
  left: -5%;
  width: 115%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.cloud-image {
  width: 100%;
  display: block;
  animation: cloudFade 4s ease-in-out infinite;
}

/* 云朵若隐若现动画 */
@keyframes cloudFade {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.65;
  }
}

@-webkit-keyframes cloudFade {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.65;
  }
}

/* 内容区域 */
.content-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: calc(var(--status-bar-height, 44rpx) + 88rpx);
  padding-bottom: 200rpx;
  overflow: visible;
}

/* 天空背景 */
.sky-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
}

/* 唱片容器 */
.record-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - calc(var(--status-bar-height, 44rpx) + 88rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 300rpx;
  z-index: 2;
}

/* 内容叠加层 */
.content-overlay {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  padding: 0 40rpx;
  margin-bottom: 100rpx;
}

/* 唱臂托盘容器 */
.tonearm-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

/* 唱臂图片 - 作为托盘底层 */
.tonearm-image {
  position: relative;
  left: 50%;
  width: 1500rpx;
  display: block;
  z-index: 1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: rotate 10s linear infinite;
  animation: rotate 10s linear infinite;
}

/* 唱片圆圈容器 - 包裹唱片及内部元素 */
.record-circle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650rpx;
  height: 650rpx;
  z-index: 2;
}

/* 唱片图片 - 作为圆圈的底层 */
.record-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 旋转动画 */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: translateX(-50%) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(-50%) rotate(360deg);
    transform: translateX(-50%) rotate(360deg);
  }
}

/* 闪烁动画 */
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 放大还原循环动画 */
@-webkit-keyframes scalePulse {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes scalePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* 装饰图片 - 放在圆圈内部靠上位置 */
.decoration-image {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 500rpx;
  z-index: 3;
}

/* 生成按钮容器 - 放在圆圈内部底部 */
.generate-button-wrapper {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: #ff4444;
  border-radius: 25rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.generate-button-wrapper:active {
  transform: translateX(-50%) scale(0.98);
}

/* 呼吸灯效果 */
@keyframes breathing {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 8rpx 20rpx rgba(255, 68, 68, 0.3),
                0 0 0 0 rgba(255, 68, 68, 0.4);
  }
  50% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 8rpx 20rpx rgba(255, 68, 68, 0.5),
                0 0 30rpx 10rpx rgba(255, 68, 68, 0.6);
  }
}

.generate-button-wrapper.breathing {
  animation: breathing 2s ease-in-out infinite;
}

.generate-button-wrapper.breathing:active {
  animation: none;
  transform: translateX(-50%) scale(0.98);
}

.generate-button-text {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
  white-space: nowrap;
}

/* 标题区域 */
.title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  position: relative;
}

.main-title-image {
  width: 380rpx;
  margin-bottom: 10rpx;
  display: block;
}

.mascot-image {
  position: absolute;
  top: calc(var(--status-bar-height, 44rpx) + 200rpx + 120rpx);
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  z-index: 6;
  display: block;
}

/* 选项区域 - 放在唱片内部的红色框位置 */
.options-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 325rpx + 50rpx));
  width: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
  z-index: 4;
  padding: 15rpx;
}

.option-item {
  position: relative;
  transition: transform 0.2s, opacity 0.2s;
  width: 100%;
  display: flex;
  justify-content: center;
  /* 初始状态：透明 */
  opacity: 0;
  /* 设置变换原点为中心，确保放大效果从中心开始 */
  transform-origin: center center;
  -webkit-transform-origin: center center;
  /* 同时应用闪烁和放大动画 - 减慢速度到3秒 */
  -webkit-animation: blink 3s ease-in-out infinite, scalePulse 3s ease-in-out infinite;
  animation: blink 3s ease-in-out infinite, scalePulse 3s ease-in-out infinite;
}

/* 为每个选项添加不同的延迟，实现依次闪烁循环 */
.option-item:nth-child(1) {
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
}

.option-item:nth-child(2) {
  -webkit-animation-delay: 0.5s, 0.5s;
  animation-delay: 0.5s, 0.5s;
}

.option-item:nth-child(3) {
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s;
}

.option-item:nth-child(4) {
  -webkit-animation-delay: 1.5s, 1.5s;
  animation-delay: 1.5s, 1.5s;
}

.option-item:active:not(.selected) {
  transform: scale(0.95);
}

/* 当有选中项时，暂停所有选项的动画 */
.options-section.has-selected .option-item {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.option-item.selected {
  opacity: 1;
  z-index: 10;
  /* 选中时停止所有动画 */
  -webkit-animation: none;
  animation: none;
  transform: scale(1);
}

.option-item.selected .option-image {
  transform: scale(1.5);
  transition: transform 0.3s ease-out;
}
.option-item.selected:active .option-image {
  transform: scale(1.5);
}

.option-image {
  width: 240rpx;
  height: 140rpx;
  display: block;
  transition: transform 0.2s;
}

/* 说明文字区域 */
.instruction-section {
  width: 100%;
  max-width: 480rpx;
  margin-top: 10rpx;
}

.instruction-background {
  width: 100%;
  display: block;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .content-overlay {
    padding: 0 30rpx;
  }

  .main-title-image {
    width: 320rpx;
  }

  .mascot-image {
    width: 60rpx;
    top: -30rpx;
  }

  .tonearm-image {
    width: 450rpx;
    bottom: -80rpx;
  }

  .record-circle-wrapper {
    width: 500rpx;
    height: 500rpx;
  }

  .decoration-image {
    width: 240rpx;
    top: 8%;
  }

  .generate-button-wrapper {
    bottom: 12%;
    padding: 20rpx 50rpx;
  }

  .generate-button-text {
    font-size: 28rpx;
  }

  .options-section {
    top: 12%;
    width: 80%;
    max-width: 380rpx;
    gap: 12rpx;
    padding: 12rpx;
  }

  .instruction-section {
    max-width: 420rpx;
  }

  .main-title-wrapper {
    top: calc(var(--status-bar-height, 44rpx) + 180rpx);
  }

  .main-title-banner {
    width: 500rpx;
  }
}
</style>
